<template>
    <div class="dataService">
        <div class="nav-box">
            <!-- <navMenu  :navList="navList"></navMenu> -->
            <!-- 项目名称及logo -->

		<!-- 导航菜单 -->
		<el-menu
			active-text-color="#fff"
			:default-active="$route.path"
			text-color="#999"
			:unique-opened="true"
			router>
			
            <!-- 引入子组件 -->
			<menuComponent :routerList="navList" />
		</el-menu>
        </div>
        <div class="content-box">
            <!-- <div class="title-box">
                <span class="line-v"></span>
                <p class="title">数据服务</p>
                <p class="subtitle">数据服务</p>
            </div> -->
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts">
// import navMenu from './navMenu.vue'
import { useIndex } from "./index";
import { RouterView } from 'vue-router'
// 我这里是放在了App.
import {ref} from 'vue'
import menuComponent from './navItem.vue'
import router from "@/router/index";
let menuList = ref(router.options.routes);
const {
    navList
}  = useIndex()
</script>

<style lang="scss" scoped>
.dataService {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    .nav-box {
        height: 100%;
        width: 220px;
        background-color: rgba(3,36,51,0.8);
        border-radius: 3px;
        border: 1px solid #2c6188;
        color: #000;
    }
    .content-box {
        width: calc(100% - 230px);
        height:100%;
        margin-left: 10px;
        padding: 10px 10px 10px;
        box-sizing: border-box;
        position: relative;
        background-color: #eef3fe;
    }
    .title-box {
        width: 100%;
        height: 47px;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: flex-start;
        letter-spacing: 1px;
        color: #fff;
        padding: 13px 24px;
        box-sizing: border-box;
    }
    .line-v {
        width: 5px;
        height: 16px;
        background-color: #ffbd3e;
        position: absolute;
        top: 16px;
        left: 2px;
    }
    .title {
        font-size: 22px;
    }
    .subtitle {
        height: 22px;
        margin-left: 15px;
        background: linear-gradient(180deg,#fffed8 0%,#37fffb 100%);
        font-size: 22px;
        line-height: 22px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

}
</style>